<template>
  <d2-container>
    <div class="h-full">
      <el-container class="h-full">
        <el-header class="p-0 border-b" style="height: 0px">
          <pdu-header></pdu-header>
        </el-header>
        <el-container>
          <el-main class="p-0 border-l border-r">
            <pdu-main></pdu-main>
          </el-main>
        </el-container>
      </el-container>
    </div>

    <meterModal ref="meterModal" />
  </d2-container>
</template>

<script>
  import pduHeader from './components/showheader'
  import pduMenu from './components/menu'
  import pduMain from './components/showmain'
  import pduProperty from './components/property'

  import meterModal from './meter-modal'

  export default {
    data() {
      return {
        show: false
      }
    },
    components: {
      pduHeader,
      pduMenu,
      pduMain,
      pduProperty,
      meterModal
    },
    methods: {
    },
    mounted() {
      showtopology.on('*', (event, data) => {
        console.log(event, data)
        if (event === 'click') {
          const pdu = data.pen
          const  id = pdu.metercode
          console.log(this.$util.cookies.get('user'))
          this.$api.getMeterData({
            customerId: JSON.parse(this.$util.cookies.get('user')).customer_id,
            meterCodes: [ id ],
          }).then(res => {
            console.log(1111,res,res.data[id])

           // if (res.data[id] && res.data[id][0].meterCode === '320200A058251101') { // 本地测试，要换成meterType
            if (res.data[id] && res.data[id][0].meterType === '080000') {
                this.$nextTick(() => {
                this.$refs.meterModal.show(res.data[id])
              })
              return
            }

            if(res.data[id]){
              let innerString = "";
              let titleString = res.data[id][0].meterName+"  "+res.data[id][0].ctime;
              for(let i =0 ;i<res.data[id].length;i++){
                innerString = innerString +"<div style='border-bottom: #1a678e dashed 1px;line-height: 40px'>" +res.data[id][i].collectName+": "+res.data[id][i].oval+" "+res.data[id][i].collectUnit+"</div>"
                if(i!=res.data[id].length -1){
                  innerString = innerString+"";
                }
              }
              this.$alert(innerString, titleString,  {
                dangerouslyUseHTMLString: true
              });
            }

          })
        }
      })
    },
  }
</script>

<style>
  .el-message-box{
    /*width: 300px;*/
  }
  .el-header {
    padding: 0;
  }
  .el-main {
    padding: 0 !important;
    overflow:hidden;
  }
</style>
